<template>
        <div class="body">
            <header>
                <el-input v-model="name" size="small"></el-input>
                <el-select v-model="state" size="small">
                    <el-option label="全部" value=''></el-option>
                    <el-option label="失效" :value='0'></el-option>
                    <el-option label="生效" :value='1'></el-option>
                </el-select>
                <el-button @click="getList" size="small">查询</el-button>
                <el-button size="small" @click="add">新增</el-button>
            </header>
            <article>
                <el-table v-loading="loading" :stripe="true" :header-cell-style="{background:'#eff3f6'}" :data="tableData"
                    :row-style="{height:10+'px'}" 
                    :cell-style="{padding:10+'px'}"
                    style="margin-top:10px"
                    height="100%"
                    >
                    <el-table-column
                        header-align="center"
                        align="center"
                        prop="id"
                        label="编码"
                        width="120">
                    </el-table-column>
                    <el-table-column
                        header-align="center"
                        align="center"
                        prop="name"
                        label="姓名"
                        width="120">
                        <template slot-scope="scope">
                            <span v-if="type !== scope.$index">
                                {{ scope.row.name }}
                            </span>
                            <span v-else>
                                <el-input size="mini" v-model="editForm.name"></el-input>
                            </span>
                        </template>
                    </el-table-column>
                    <el-table-column
                        header-align="center"
                        align="center"
                        prop="phone"
                        label="电话号码"
                        width="145">
                        <template slot-scope="scope">
                            <span v-if="type !== scope.$index">
                                {{ scope.row.phone }}
                            </span>
                            <span v-else>
                                <el-input size="mini" v-model="editForm.phone"></el-input>
                            </span>
                        </template>
                    </el-table-column>
                    <el-table-column
                        header-align="center"
                        align="center"
                        prop="dept"
                        label="部门"
                        width="130">
                        <template slot-scope="scope">
                            <span v-if="type !== scope.$index">
                                {{ scope.row.dept }}
                            </span>
                            <span v-else>
                                <!-- <el-input size="mini" v-model="editForm.dept"></el-input> -->
                                <el-select size="mini" v-model="editForm.dept" placeholder="请选择">
                                    <el-option
                                    v-for="item in b"
                                    :key="item.id"
                                    :label="item.name"
                                    :value="item.name">
                                    </el-option>
                                </el-select>
                            </span>
                        </template>
                    </el-table-column>
                    <el-table-column
                        header-align="center"
                        align="center"
                        prop="position"
                        label="职位"
                        width="130">
                        <template slot-scope="scope">
                            <span v-if="type !== scope.$index">
                                {{ scope.row.position }}
                            </span>
                            <span v-else>
                                <!-- <el-input size="mini" v-model="editForm.position"></el-input> -->
                                <el-select size="mini" v-model="editForm.position" placeholder="请选择">
                                    <el-option
                                    v-for="item in a"
                                    :key="item.id"
                                    :label="item.name"
                                    :value="item.name">
                                    </el-option>
                                </el-select>
                            </span>
                        </template>
                    </el-table-column>
                    <el-table-column
                        header-align="center"
                        align="center"
                        prop="sex"
                        label="性别"
                        sortable
                        width="100">
                        <template slot-scope="scope">
                            <span v-if="type !== scope.$index">
                                <span v-if="scope.row.sex === 2">
                                    男
                                </span>
                                <span v-else>
                                    女
                                </span>
                            </span>
                            <span v-else>
                                <el-select size="mini" v-model="editForm.sex" placeholder="请选择">
                                    <el-option
                                    v-for="item in options"
                                    :key="item.value"
                                    :label="item.value"
                                    :value="item.sex">
                                    </el-option>
                                </el-select>
                            </span>
                        </template>
                    </el-table-column>
                    <el-table-column
                        header-align="center"
                        align="center"
                        prop="address"
                        label="地址">
                        <template slot-scope="scope">
                            <span v-if="type !== scope.$index">
                                {{ scope.row.address }}
                            </span>
                            <span v-else>
                                <el-input size="mini" v-model="editForm.address"></el-input>
                            </span>
                        </template>
                    </el-table-column>
                    <el-table-column
                        header-align="center"
                        align="center"
                        prop="state"
                        sortable
                        label="状态"
                        width="120">
                        <template slot-scope="scope">
                            <span v-if="type !== scope.$index">
                                <span v-if="scope.row.state === 0" :style="{'color':scope.row.state === 0 ? 'red':'blue'}">
                                    已失效
                                </span>
                                <span v-else :style="{'color':'green'}">
                                    正常
                                </span>
                            </span>
                            <span v-else>
                                <el-select size="mini" v-model="editForm.state" placeholder="请选择">
                                    <el-option
                                    v-for="item in options2"
                                    :key="item.value"
                                    :label="item.value"
                                    :value="item.state">
                                    </el-option>
                                </el-select>
                            </span>
                        </template>
                    </el-table-column>
                    <el-table-column
                        header-align="center"
                        align="center"
                        label="操作"
                        fixed="right"
                        width="150px">
                        <template slot-scope="scope">
                            <div v-show="type !== scope.$index">
                                <el-button
                                    size="mini"
                                    type="success"
                                    icon="el-icon-edit"
                                    @click="handleEdit(scope.$index, scope.row)"></el-button>
                                    <el-button
                                    size="mini"
                                    type="danger"
                                    icon="el-icon-delete"
                                    @click="handleDEL(scope.$index, scope.row)"></el-button>
                            </div>
                            <div v-show="type === scope.$index">
                                <el-button
                                    size="mini"
                                    type="success"
                                    :loading="load"
                                    @click="ok"
                                    icon="el-icon-circle-check"
                                    ></el-button>
                                    <el-button
                                    size="mini"
                                    :loading="load"
                                    type="danger"
                                    icon="el-icon-close"
                                    @click="esc"></el-button>
                            </div>
                        </template>
                    </el-table-column>
                </el-table>
            </article>
            <footer>
                <el-pagination @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="page"
                    :page-sizes="[10, 20, 50, 100, 200]"
                    :page-size="size"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total"/>
            </footer>
        </div>
</template>

<script>
import { roleListApi, userDeleteApi, userUpdateApi } from '../../../apis/homeApi'

    import { orgListApi, userListApi } from '../../../apis/userApi'

    export default {
        data() {
            return {
                page: 1,
                size: 10,
                total: 0,
                name: '',
                state: '',
                tableData: [],
                loading: true,
                type:null,
                options:[
                    {sex:1,value:'女'},
                    {sex:2,value:'男'}
                ],
                options2:[
                    {state:1,value:'正常'},
                    {state:0,value:'失效'}
                ],
                a:[],
                b:[],
                load:false,
                editForm:{}
            }
        },
        created() {
            this.getList()
        },

        methods: {

            async getList() {
                let result = await userListApi({
                    page: this.page,
                    size: this.size,
                    name: this.name,
                    state: this.state
                })
                
                if (result.code === 200) {
                    this.tableData = result.data.rows.map(it => {
                        return it
                    })
                    this.total = result.data.count
                }       

                let _this = this
                setTimeout(function() {
                    _this.loading = false
                })
                
            },
            async handleSizeChange(_size) {
                this.size = _size
                await this.$nextTick()
                if (!this.loading) {
                    this.loading = true
                    this.getList()
                }
            },
            async handleCurrentChange(_page) {
                this.page = _page
                await this.$nextTick()
                if (!this.loading) {
                    this.loading = true
                    this.getList()
                }
            },
            handleEdit(index,row){
                this.editForm = JSON.parse(JSON.stringify(row))
                this.load = true
                this.type = index
                Promise.all([
                    // 权限
                    roleListApi(),
                    // 职位
                    orgListApi()
                ]).then(res => {
                    if(res[0].code === 200){
                        this.a = res[0].data
                    }
                    if(res[1].code === 200){{
                        this.b = res[1].data.rows
                    }}
                    this.load = false
                })
            },

            handleDEL(index,row){
                console.log(row.id);
                userDeleteApi(row.id).then(res => {
                    console.log(res);
                    if(res.code === 200){
                        this.$message.success('删除成功')
                        this.getList()
                    }
                })
            },
            add(){
                this.$router.push('/sys/user/edit')
            },
            esc(){
                this.type = null
            },
            ok(){
                let po = this.editForm.position
                this.a.forEach(it => {
                    if(it.name === po){
                        this.editForm.role = it.id
                    }
                })
                
                userUpdateApi(this.editForm).then(res => {
                    if(res.code === 200){
                        this.$message.success('修改用户成功')
                        this.getList()
                        this.type = null
                    }else{
                        this.$message.error(res.message)
                    }
                })
            }
        },

    }
</script>

<style lang="less" scoped>
    .body {
        height: calc(100% - 41px - 20px);
        > header {
            height: 32px;
            padding: 8px 16px;
            background: #fff;
            border-bottom: solid 1px #ddd;
            text-align: right;
            .el-input {
                width: 220px;
            }
            .el-input,
            .el-select {
                margin-right: 10px;
            }
        }
        > article {
            height: calc(100% - 110px);
            background: #fff;
            padding: 8px 16px;
            .el-table{
                margin-top: 10px;
                height: 100%;
                overflow-y: auto;
            }
        }
        > footer {
            height: 28px;
            padding: 8px 16px;
            border-top: solid 1px #ddd;
            background: #fff;
        }
    }
</style>